<template>
  <u-tabbar
    :value="value"
    @change="tabBarChange"
    :fixed="true"
    :placeholder="true"
    :safeAreaInsetBottom="true"
    activeColor="#2D7DF2"
    color="#76A8F1"
  >
    <u-tabbar-item text="首页" name="index">
      <template #active-icon>
        <image
          class="u-page__item__slot-icon"
          src="/static/tabBar/home-a.png"
        ></image>
      </template>
      <template #inactive-icon>
        <image
          class="u-page__item__slot-icon"
          src="/static/tabBar/home.png"
        ></image>
      </template>
    </u-tabbar-item>
    <u-tabbar-item text="我的" name="my">
      <template #active-icon>
        <image
          class="u-page__item__slot-icon"
          src="/static/tabBar/my-a.png"
        ></image>
      </template>
      <template #inactive-icon>
        <image
          class="u-page__item__slot-icon"
          src="/static/tabBar/my.png"
        ></image>
      </template>
    </u-tabbar-item>
  </u-tabbar>
</template>

<script setup>
import { computed } from "vue";
import { useUserStore } from "@/stores/user.js";
const userStore = useUserStore();
const settingInfo = computed(() => userStore.setting);

const porps = defineProps({
  value: {
    type: String,
    default: "index",
  },
});

const tabBarChange = (e) => {
  uni.switchTab({
    url: "/pages/" + e + "/" + e,
  });
};
</script>

<style lang="scss" scoped></style>
<style>
.u-page__item__slot-icon {
  width: 64rpx !important;
  height: 64rpx !important;
}
.u-tabbar-item__text {
  margin-top: 18rpx !important;
}
</style>
